@charset "utf-8";
.div1 {
    /* 可以给块级元素、行内元素加背景，是不是所有的？ */
    /* background-color: antiquewhite;  */
    background-image: url("img/pic.jpg");
    /* background-size:  */
    /* 定位区域 */
    /* background-origin: border-box */
    padding: 20px;
    /* background-repeat: repeat-x; */
    /* background-repeat: repeat-y; */
    background-repeat: no-repeat;
    /* background-position:top center; */
    /* 图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。 */
    /* background-position:50% 50%; */
    background-position:10px 10px;
    /* 默认随页面滚动scroll */
    background-attachment:fixed；
}

/* 行内元素和块级元素的区别： 块级元素                  行内元素
                            独占一行                   并排
                            可以设置height和width    可置换元素（img|input|select|textarea|button|label）可以设置宽高
                            可以设置padding和margin  设置出来的结果影响左右，占空间，不影响上下，不占页面空间
            margin的上下融合现象：取大 */

a{
    background-image: url("img/pic.jpg");
    padding-left:30px;
}
span{
    background-image: url("img/pic.jpg");
    padding-left: 30px；
}
img{
    height:50px;
    width:50px;
    padding-left:20px;
}

/* 适用于块级元素，行内元素可以通过padding设置 */
/* p {text-indent: 5em;} */
/* p {text-indent: -5em; padding-left: 5em;} */

/* 缩进值是父元素的 20%，即 100 个像素 */
/* .div2 {width: 500px;}
p {text-indent: 20%;} */

/* text-indent可以继承，p是50px */
/* #outer {width: 500px;}
#inner {text-indent: 10%;}
p {width: 200px;} */

/* 适用于块元素，将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。 */
/* <CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。 */
/* justify只在ie浏览器中管用 */
p { 
    /* text-align: center; */
    /* text-align: justify; */
    /* 字间隔 */   
    /* word-spacing:30px; */
     /* 字母间隔 */
    /* letter-spacing:-0.5em; */
    /* letter-spacing:-10px； */
    /* 转换文本大小写 */
    /* text-transform: uppercase; */
    /* text-transform: lowercase; */
    /* 只对首字母大写 */
    text-transform: capitalize;

    /* text-decoration 值会替换而不是累积起来。 */
    /* 添加上划线 */
    /* text-decoration: overline; */
    /* 添加下划线 */
    /* text-decoration: underline; */
    /* 添加删除线 */
    /* text-decoration: line-through; */
    /* 添加闪烁，好像看不到效果*/
    text-decoration: blink;
    
    /* 详见img里white-space */
    /* 丢掉多余的空白符 */
    /* white-space: normal; */
    /* 任何元素都是一个pre元素（空格） */
    /* white-space: pre; */
    /* 防止元素换行 */
    /* white-space: nowrap; */
    /* 保留空白符，保留换行 */
    /* white-space: pre-wrap; */
    /* 不保留空白符，保留换行 */
    /* white-space: pre-line; */

    /* 对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。 */
    /* 阅读方向从右往左 */
    direction:rtl;

    /* 有空格和# 或 $ 之类的符号，加引号 */
    font-family: Times, TimesNR, 'New Century Schoolbook',Georgia, 'New York', serif;

    /* 二者看起来一样，斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。 */
    /* font-style:italic; */
    font-style:oblique;

    /* 采用不同大小的大写字母 */
    font-variant:small-caps;

    /* font-weight:bold; */
    /* font-weight:900; */

    /* 使用正确的html标签来控制字体大小 */
    /* 可以通过浏览器的缩放工具调整文本大小，但是这实际上是对整个页面的调整，而不仅限于文本。 */
    /* 不允许用户在所有浏览器中改变文本大小 */
    font-size:14px;
    /* 在 IE 中仍存在问题。在重设文本大小时，会比正常的尺寸更大或更小。需要body {font-size:100%;} */
    font-size:3.75em; /* 60px/16=3.75em */
} 
    /* 顺序 */
a:link {color:#FF0000;text-decoration:none;background-color:#B2FF99;}		/* 未被访问的链接 */
a:visited {color:#00FF00;text-decoration:none;background-color:#FFFF85;}	/* 已被访问的链接 */
a:hover {color:#FF00FF;text-decoration:none;background-color:#FF704D;}	/* 鼠标指针移动到链接上 */
a:active {color:#0000FF;text-decoration:none;background-color:#FF704D;}	/* 正在被点击的链接 */

/* li会继承ul的属性 */
/* 前标志变成方块 */
ul {list-style-type : square; list-style-position:inside;}
ul  li{list-style-image : url("img/pic.jpg")}

table
  {
     
  border-collapse:collapse; /* 要声明！DOCTYPE */
  border: 1px solid black;
  width:100%;
  }

th, td
  {
  border: 1px solid black;
  width: 50px;
  height:30px;
  text-align:right;
  vertical-align:bottom;
  padding:15px;
  background-color:green;
  color:white;
  }
